<%--
  Created by IntelliJ IDEA.
  User: 肖
  Date: 2020/10/6
  Time: 23:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="row">
    <div class="col-md-5" style="float: right;">
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group">
                <input type="text" id='usersearch' class="form-control"  placeholder="请输入" value="${search}">
                <span class="input-group-btn">
                            <button type="button" id="userbutton" class="btn btn-primary">
                                <span class="glyphicon glyphicon-search"></span>&nbsp搜索
                            </button>
                            </span>
            </div>
        </form>
    </div>


</div>
<div class="row" style="margin-top: 10px;">
    <div class="col-md-6">
        <button id="users" type="button" class="btn btn-primary btn-sm">
            <span class="glyphicon glyphicon-refresh"></span>刷新
        </button>
        <button id="moredeluser"  type="button" class="btn btn-danger btn-sm">
            <span class=" glyphicon glyphicon-trash"></span>批量删除
        </button>

    </div>
</div>
<div class="tab-pane fade in active" >
    <table class="table table-hover table-responsive">

        <thead>
        <tr>
            <th><input id="ck_all" type="checkbox"></th>
            <th>用户ID</th>
            <th>姓名</th>
            <th>密码</th>
            <th>电话</th>
            <th>注册时间</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${page.list}" var="p" varStatus="vs">
            <tr>
                <th><input value="${p.id}" name="ck_content" type="checkbox"></th>

                <th>${p.UId}</th>
                <th ondblclick='update_useruname(this,${p.id})'>${p.uname}</th>
                <th ondblclick='update_userupwd(this,${p.id})'>${p.upwd}</th>
                <th ondblclick='update_useruphone(this,${p.id})'>${p.uphone}</th>
                <th ondblclick='update_userutime(this,${p.id})'>${p.utime}</th>
                <th ondblclick='update_useraddress(this,${p.id})'>${p.address}</th>



                <td>
                    <a onclick='del(this,${p.id})' class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                        <%--                    <a class="text-warning" href="#"><span class="glyphicon glyphicon-edit"></span></a>--%>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<script src="<%=request.getContextPath()%>/js/jquery-3.4.1.js"></script>
<script src="<%=request.getContextPath()%>/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

<script>

    //批量删除start

    //批量删除start
    $(function(){
        let ck = document.getElementById("ck_all");
        let cks = document.getElementsByName("ck_content");
        ck.onclick=function(){
            if(ck.checked){
                for(let i=0;i<cks.length;i++){
                    cks[i].checked=true;
                }
            }else{
                for(let i=0;i<cks.length;i++){
                    cks[i].checked=false;
                }
            }
        }
    });
    $(function(){

        document.getElementById("moredeluser").onclick=function(){
            let cks = document.getElementsByName("ck_content");
            let count = 0;
            for(let i=0;i<cks.length;i++){
                if(cks[i].checked){
                    count++;
                }
            }
            if(count==0){
                alert("sorry,请你先选中!");
                return;
            }
            let flag = confirm("确定删除吗?");
            if(flag){
                let sids = "";
                for(let i=0;i<cks.length;i++){
                    if(cks[i].checked){
                        sids+=cks[i].value+":";
                    }
                }
                $.post('/prj/admin/delAlluser.action',{"sid":sids},function(data){
                    if(data.code=="200"){
                        $("#one").load("/prj/admin/one.action");
                    }
                })

            }
        };
    });

    //异步刷新
    $("#users").click(function () {

        $("#one").load("/prj/admin/one.action",{});
    })
//全局搜索
    $("#userbutton").click(function () {
        let search = $("#usersearch").val();
        $("#one").load("/prj/admin/one.action",{search:search});
    })

    //异步删除
    function del(obj,id){
        $.post('/prj/admin/deluser.action',{"id":id},function(data){
            if(data.code=="200"){
                let tr = obj.parentElement.parentElement;
                $(tr).remove();
            }
        })
    }



    //修改开始
    //修改用户姓名
    function update_useruname(obj,id){
        let str = "<input onblur='update_input_useruname(this,"+id+")' type='text' value='"+obj.innerText+"'>";
        obj.innerHTML = str;
    }
    function update_input_useruname(obj,id){
        $.post('/prj/admin/userupdate.action',{"uname":obj.value,"id":id},function(data){
            if(data.code=="200"){
                obj.parentElement.innerText=obj.value;
            }
        })
    }

    //修改用户密码
    function update_userupwd(obj,id){
        let str = "<input onblur='update_input_userupwd(this,"+id+")' type='text' value='"+obj.innerText+"'>";
        obj.innerHTML = str;
    }
    function update_input_userupwd(obj,id){
        $.post('/prj/admin/userupdate.action',{"upwd":obj.value,"id":id},function(data){
            if(data.code=="200"){
                obj.parentElement.innerText=obj.value;
            }
        })
    }
    //修改用户phone
    function update_userphone(obj,id){
        let str = "<input onblur='update_input_userphone(this,"+id+")' type='text' value='"+obj.innerText+"'>";
        obj.innerHTML = str;
    }
    function update_input_userphone(obj,id){
        $.post('/prj/admin/userupdate.action',{"phone":obj.value,"id":id},function(data){
            if(data.code=="200"){
                obj.parentElement.innerText=obj.value;
            }
        })
    }

    //修改用户utime
    function update_userutime(obj,id){
        let str = "<input onblur='update_input_userutime(this,"+id+")' type='text' value='"+obj.innerText+"'>";
        obj.innerHTML = str;
    }
    function update_input_userutime(obj,id){
        $.post('/prj/admin/userupdate.action',{"utime":obj.value,"id":id},function(data){
            if(data.code=="200"){
                obj.parentElement.innerText=obj.value;
            }
        })
    }
    //修改用户address
    function update_useraddress(obj,id){
        let str = "<input onblur='update_input_useraddress(this,"+id+")' type='text' value='"+obj.innerText+"'>";
        obj.innerHTML = str;
    }
    function update_input_useraddress(obj,id){
        $.post('/prj/admin/userupdate.action',{"address":obj.value,"id":id},function(data){
            if(data.code=="200"){
                obj.parentElement.innerText=obj.value;
            }
        })
    }

</script>
<%@include file="../page/adminuserpage.jsp" %>